<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-13 19:24:36
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-17 09:17:19
 * @Description: 
-->
<template>
  <div class="content">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span>标签管理</span>
          <el-button icon="Plus" @click="handleAdd" type="primary"
            >添加标签</el-button
          >
        </div>
      </template>

      <!-- table -->
      <el-table
        stripe
        highlight-current-row
        :data="tagList"
        style="width: 100%"
      >
        <el-table-column prop="id" label="id" />
        <el-table-column prop="name" label="名称" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              @click="handleRemove(scope.row, scope.$index)"
              type="danger"
              icon="Delete"
              >删除</el-button
            >
            <el-button @click="handleEdit(scope.row,scope.$index)" type="primary" icon="Edit"
              >编辑</el-button
            >
            <el-button type="success" icon="CollectionTag">标记</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
 
<script setup>
import { ref, reactive } from "vue";
import { tag } from "@/api";

let tagList = ref((await tag.list()).data);

/**
 * @description: 删除标签
 * @return {*}
 * @param {*} data
 * @param {*} index
 */
const handleRemove = (data, index) => {
  ElMessageBox.confirm(`<p>你是否要删除 <b>${data.name} </b>?</p>`, "确认", {
    dangerouslyUseHTMLString: true,
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let { status, msg } = await tag.remove(data.id);
      if (status) {
        tagList.value.splice(index, 1);
      }
      ElMessage({
        type: status ? "success" : "error",
        message: msg,
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};

/**
 * @description: 添加标签
 * @return {*}
 */
const handleAdd = () => {
  ElMessageBox.prompt("请输入标签名", "添加标签", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(async ({ value }) => {
      let res = await tag.release({ name: value });
      if (res.status) {
        tagList.value.push({ id: res.data.id, name: value });
      }
      ElMessage({
        type: res.status ? "success" : "error",
        message: res.msg,
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Input canceled",
      });
    });
};


/**
 * @description: 修改标签名
 * @return {*}
 * @param {*} data
 * @param {*} index
 */
const handleEdit = (data,index) => {
  ElMessageBox.prompt("请修改标签名", "编辑标签", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputPlaceholder:data.name
  })
    .then(async ({ value }) => {
      let res = await tag.edit(data.id ,{name:value});
      if (res.status) {
        tagList.value[index].name = value;
      }
      ElMessage({
        type: res.status ? "success" : "error",
        message: res.msg,
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};


</script>

<style lang='less' scoped>
</style>

